<template>
    <div>
        <h1>页面设置</h1>
        <ul>
            <li v-for="p in peoples">{{p}}</li>
        </ul>
        <button @click="btnclick">发起跨域请求</button>
    </div>
</template>
<script>
// import axios from "axios"
export default {
    data:function() {
        return {
            peoples:[]
        }
    },
    // 在vue项目中 可以通过设置代理 服务器实现跨域请求 
    // 在config文件夹中还可以通过 index.js文件里设置代理列表
    methods: {
        btnclick: function () {
           	var url = "/api/telematics/v3/weather?location=%E9%83%91%E5%B7%9E&ak=ck6oSxPYCgGLYKc17YZXanOC&output=json"
            this.$ajax.get(url)
                .then(function (res) {
                    console.dir(res.data)

                })
      
        }
    },
    mounted: function () {
        // console.log("页面渲染完毕")
    },
    activated: function () {
        // console.log("页面被激活了")
        //    axios的请求函数 会返回一个promise对象发 通过.then添加回调函数

        // 和$不同 请求成功的回调函数的参数是整个响应报文 
        // 而不是响应体 通过参数 data可以得到响应体
        this.$ajax.get("/static/data.json")
            .then(function (res) {
                console.dir(res.data)
                this.peoples = res.data.result

            }.bind(this), function () {
                alert("请求失败")
            })

    }
}

</script>

<style scoped>

</style>  
